<template>
	<div class="container">
		<v-toolBar :fullPath="postData.opera" :tableColumns="tableColumns" @changeLie="getChangeLie"
			@getSearchIPArr="getToolBarSearchIPArr" @getSearchIP="getToolBarSearchIP">
		</v-toolBar>
		<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			:data="tableDataFn" border style="width: 100%" stripe>
			<el-table-column type="index" width="50" label="序号">
			</el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable" :width="item.width"
					align="center" v-if="item.isShow" :key="item.prop">
					<template v-slot="scope">
						<template v-if="item.format == 'available'">
							<div>
								<template v-if="scope.row[item.prop] == 'Y'">
									<el-tag type="success">正常</el-tag>
								</template>
								<template v-else-if="scope.row[item.prop] == 'N'">
									<el-tag type="danger">异常</el-tag>
								</template>
								<template v-else>
									<el-tooltip class="item" effect="dark" :content="scope.row[item.prop]"
										placement="right">
										<el-tag type="danger" effect="dark">异常值</el-tag>
									</el-tooltip>
									
								</template>
							</div>
						</template>
						<!-- <template v-else-if="item.format == 'OS_TYPE'">
                            <div v-if="scope.row[item.prop] == 'Linux'">
                                <el-tag 
                                    type="primary" 
                                    size="mini" 
                                    effect="plain"
                                >
                                    {{ scope.row[item.prop] }}
                                </el-tag>
                            </div>
                            <div v-else-if="scope.row[item.prop] == 'Windows'">
                                <el-tag 
                                    type="success" 
                                    size="mini" 
                                    effect="plain"
                                >
                                    {{ scope.row[item.prop] }}
                                </el-tag>
                            </div>
                            <div v-else>
                                {{ scope.row[item.prop] }}
                            </div>
                        </template> -->
						<template v-else-if="item.format == 'CONN_TYPE'">
							<div v-if="scope.row[item.prop] == 'ssh'">
								<el-tag type="primary" size="mini" effect="plain">
									{{ scope.row[item.prop] }}
								</el-tag>
							</div>
							<div v-else-if="scope.row[item.prop] == 'snmp'">
								<el-tag type="success" size="mini" effect="plain">
									{{ scope.row[item.prop] }}
								</el-tag>
							</div>
							<div v-else>
								{{ scope.row[item.prop] }}
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<v-pagination :dataTotal="postData.dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
	</div>
</template>

<script>
	import {
		getMysqlIoInfo
	} from "@/api/index.js";
	import vPagination from "common/Pagination.vue";
	import vToolBar from "common/monitorInfoToolBar/Toolbar.vue";
	import tableColumns from "./sqlConnectTableColumns.js";
	import bus from "common/bus.js";

	export default {
		components: {
			vPagination,
			vToolBar,
		},
		data() {
			return {
				postData: {

					curPage: 1,
					pageSize: 20,
					dataTotal: 0
				},
				tableData: [],

				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: "",
				timerName: "MonitorInfoServerConnect",
				timerEventName: "timerMonitorInfoServerConnect",
				// timerInterval: 1000 * 60,
				loading: true,
				Ioitem: {
					IP: "",
					DATANAME: "",
				},
			};
		},
		created() {
			this.getTableData();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.getTableData('n');
				}
			});
		},
		computed: {
			postDataFn() {
				return {
					postData: JSON.stringify(this.postData),
				};
			},
			tableDataFn() {
				return this.tableData.filter((item) => {
					return item;
				});
			},
			timerInterval() {
				return Number(this.$store.state.pageRefresh) * 1000;
			},
		},
		methods: {
			getTableData(data) {
				if (!data) {
					this.loading = true;
				}
				this.tableData = [];

				getMysqlIoInfo().then((res) => {
					// 处理后台返回的数据  无奈
					let itemKey = Object.keys(res);
					let itemValue = Object.values(res);
					let itemBox = []
					// console.log(itemKey,itemValue)

					itemKey.forEach((item, index) => {
						let itemIp = item.split(",")[0].split("[")[1];
						let iteminstance = item.split(",")[1].split("]")[0];

						if (itemValue[index].length > 0) {
							itemValue[index].forEach((valueItem, valueIndex) => {
								valueItem["IP"] = itemIp;
								valueItem["DATANAME"] = iteminstance;
								itemBox.push(valueItem);
							});
						} else {
							this.Ioitem.IP = itemIp;
							this.Ioitem.DATANAME = iteminstance;
							itemBox.push(this.Ioitem);
						}
					});

					this.postData.dataTotal = itemBox.length
					this.$store.commit('MysqlIoInfo/setItem', itemBox)
					this.$store.commit("MysqlIoInfo/pagination", this.postData);
					this.tableData = this.$store.getters["MysqlIoInfo/getItem"]

					// this.dataTotal = this.tableData.length;
					// this.tableData = res.data;

					this.loading = false;
				});
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				this.SearchIPArr = arr;

				this.postData.curPage = 1;
				if (this.SearchIPArr.length > 0) {
					this.postData.filters = {
						ip: this.SearchIPArr,
					};
				} else {
					this.postData.filters = {};
				}

				this.getTableData();
			},
			async getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				await this.$store.commit("MysqlIoInfo/SearchItem", this.SearchIP);
				await this.$store.commit("MysqlIoInfo/pagination", this.postData);
				this.tableData = await this.$store.getters["MysqlIoInfo/getSearchItem"]
				this.postData.dataTotal = this.tableData.length
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
		},
		watch: {},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
	};
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
